import React, { useEffect, useState } from 'react'
import './login.css'
import { useNavigate, useSearchParams } from 'react-router-dom'
import {Toast  } from 'antd-mobile'
import instance from '../http/instance'
export default function Yzm() {
    const [search] = useSearchParams()
    const nav = useNavigate()
    const phon = search.get('phon')
    const pwd = search.get('pwd')
    const [types,settypes] = useState(false)
    const [times,settimes]=  useState(60)
    const [yzms,setyzms] = useState('')
    const Tdeng=()=>{
        nav('/zhu')
    }
    
    const que=()=>{
        let times = 60
        let tims = setInterval(() => {
            times--
            settimes(times)
            if(times==0){
                clearInterval(tims)
            }
        }, 1000);
    }
    const tiao=async()=>{
        let data = await instance.post(`http://localhost:8000/yzms`,{yzms:yzms})
        if(data.data.code==200){
            nav(`/xin?phon=${phon}&pwd=${pwd}`)
        }else{
            Toast.show({
                icon: 'fail',
                content: '验证码错误',
              })
        }
    }
    useEffect(()=>{
        que()
    },[])

  return (
    <div>
            <div className='gu_Zxin'>
                <svg onClick={Tdeng} t="1732936856369" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6021" width="32" height="32"><path d="M631.04 161.941333a42.666667 42.666667 0 0 1 63.061333 57.386667l-2.474666 2.730667-289.962667 292.245333 289.706667 287.402667a42.666667 42.666667 0 0 1 2.730666 57.6l-2.474666 2.752a42.666667 42.666667 0 0 1-57.6 2.709333l-2.752-2.474667-320-317.44a42.666667 42.666667 0 0 1-2.709334-57.6l2.474667-2.752 320-322.56z" fill="#111111" p-id="6022"></path></svg>
            </div>
        <h1 className='gu_Zh'>短信验证</h1><br />
        <p className='gu_Zp'>验证码已经通过短信发送至：</p><br />
        <p className='gu_Zpm'>+86<span>{phon}</span></p>
        <input type="text"  className='gu_i' placeholder='输入验证码' value={yzms} onChange={(e)=>{
            setyzms(e.target.value)
        }} /> <br />
        <button className='gu_btn' onClick={tiao} >确定</button>
        <p className='gu_dao'>倒计时<span>{times}</span>s</p>
        
    </div>
  )
}

